<template>
<div>
    <el-row :gutter="24">
        <el-col :span="6">
            <div class="widget-small">
                <i class="el-icon-user-solid fa fa1"></i>
                <div class="widget-small-info">
                    <h3>项目成员</h3>
                    <span>7</span>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="widget-small">
                <i class="el-icon-view fa fa2"></i>
                <div class="widget-small-info">
                    <h3>视图</h3>
                    <span>5</span>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="widget-small">
                <i class="el-icon-chat-line-round fa fa3"></i>
                <div class="widget-small-info">
                    <h3>信息</h3>
                    <span>55</span>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="widget-small">
                <i class="el-icon-star-off fa fa4"></i>
                <div class="widget-small-info">
                    <h3>技术</h3>
                    <span>8</span>
                </div>
            </div>
        </el-col>
    </el-row>
	<el-row :gutter="24">
	<el-col :span="16">
		<div class="description">
			<div class="layui-card">
            <div class="layui-card-header">项目介绍</div>
            <div class="layui-card-body project-introduce">
                <blockquote class="layui-elem-quote layui-quote-nm">
                    TIMO后台管理系统，基于SpringBoot2.5 + MybatisPlus + JWT + Shiro 开发的后台管理系统，采用分模块的方式便于开发和维护，目前支持的功能有：权限管理、部门管理、字典管理、日志记录、文件上传、代码生成等，为快速开发后台系统而生的脚手架！
                    <div>项目成员：蒋傲 刘骏 李万余 文舒玲 侯露 唐廖莹</div>
                    <div>后端开源地址：<a href="https://gitee.com/mnxc01/gxa">https://gitee.com/mnxc01/gxa</a></div>
					<div>前端开源地址：<a href="https://gitee.com/mnxc01/gxa_vue">https://gitee.com/mnxc01/gxa_vue</a></div>
                </blockquote>
                <div>
                    <h4>技术选型</h4>
                    <ol>
                        <li>后端技术：SpringBoot + MybatisPlus + JWT + Swagger2 </li>
                        <li>前端技术：ElementUI + axios + Vue + Vuex</li>
                    </ol>
                </div>
                <div>
                    <h4>功能列表</h4>
                    <ol>
                        <li>用户管理：用于管理后台系统的用户，可进行增删改查等操作。</li>
                        <li>角色管理：分配权限的最小单元，通过角色给用户分配权限。</li>
                        <li>菜单管理：用于配置系统菜单，同时也作为权限资源。</li>
                        <li>部门管理：通过不同的部门来管理和区分用户。</li>
                        <li>数据接口：根据业务代码自动生成相关的api接口文档</li>
                    </ol>
                </div>
            </div>
        </div>
		</div>
	</el-col>
	<el-col :span="8">
		<div class="giteeTree">
			<img src="@/assets/img/giteeTree.jpg" class="imgGit"/>
		</div>
	</el-col>
	</el-row>
</div>   
</template>

<script>
export default{
    data(){
        return {}
    }
}
</script>

<style>
.imgGit{
	border-radius: 20px;
}
.description{
	padding: 30px;
	border: 1px solid #aaa;
	border-radius: 20px;
}
.giteeTree{
	box-sizing:border-box;
	border: 1px solid #aaa;
	border-radius: 20px;
	overflow: hidden;
}
.widget-small {
    background-color: #FFFFFF;
    overflow: hidden;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    height: 80px;
}
.widget-small .fa {
    float: left;
    width: 40%;
    line-height: 80px;
    color: #FFFFFF; 
    font-size: 30px;
}
.fa1{ background-color: #029789;}
.fa2{ background-color: #17a2b8;}
.fa3{ background-color: #fbad4c;}
.fa4{ background-color: #ff646d;}
.widget-small-info {
    float: left;
    text-align: left;
    width: 40%;
    margin-left: 20px;
}
.widget-small-info h4{
    margin-bottom: 0;
}
.el-row {
    margin-bottom: 20px;

}
.el-col {
    border-radius: 4px;
}
</style>
 